import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { Toast, Button  } from 'antd-mobile';
import CopyToClipboard from 'react-copy-to-clipboard';

import { getUserId } from '../../../utils/utils';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

class MembersBody extends Component {
	constructor(props) {
        super(props)
        autoBind(this)
    }
    componentDidMount() {
    	const { dispatch, meyley } = this.props

    	dispatch({
    		type: 'meyley/fetchMembers',
    		payload: {
    			userId: getUserId()
    		}
    	})
    }
	render() {
		const { meyley } = this.props

		const inviteUrl = meyley.members && meyley.members.inviteUrl || ''
		const inviteCpde = inviteUrl.substr(inviteUrl.lastIndexOf('=') + 1)
	 	return (
	 		<div className={styles['members-body']}>
	 			<div className={styles['members-body-item']} onClick={() => browserHistory.push('/mine-page')}>
	 				<div className={styles['members-body-my-invate']} >
	 					<div className={`${styles['members-body-item-left']} ${styles['members-body-item-invite-left']}`}>
		 				我的邀请码：{inviteCpde}
		 				</div>
		 				<div className={`${styles['members-body-item-right']} ${styles['members-body-my-invate-right']}`}>
		 					专属二维码 <img style={{width: '0.8rem', height: '0.8rem'}} src={meyley.members && meyley.members.inviteCodeUrl} />
		 				</div>
	 				</div>
	 			</div>

	 			<div className={styles['members-body-item']}>
	 				<div className={styles['members-body-item-top']}>
	 					<div className={styles['members-body-item-left']}>
		 				我推荐的会员
		 				</div>
		 				<div onClick={() => browserHistory.push('/moreMembers')} className={styles['members-body-item-right']}>
		 				更多
		 				<img style={{marginLeft: '0.12rem', width: '0.16rem'}} src={require('../../../assets/icon/arrow-right.png')} />
		 				</div>
	 				</div>
	 				<div className={styles['members-body-item-bottom']}>
	 					{
	 						meyley.members && meyley.members.myUserList && meyley.members.myUserList.length ? (
		 						meyley.members.myUserList.map((user, ii) => {
		 							return ii <= 6 ? (<div key={ii} className={styles['members-body-order']}>
				 						<img className={styles['members-body-order-img']} src={user.headpic} />
				 						<span className={styles['members-body-order-des']}>{user.userName}</span>
				 						<span className={styles['members-body-order-text']}>{user.rank}级</span>
				 					</div>) : null
		 						})
	 							) : (<div className={styles['members-body-order']} style={{color: 'rgb(192,192,192)'}}>暂无推荐会员</div>)
	 					}
	 				</div>
	 			</div>

	 			<div className={styles['members-body-item']}>
	 				<div className={styles['members-body-item-top']}>
	 					<div className={styles['members-body-item-left']}>
		 				链接推荐
		 				</div>
		 				<div className={styles['members-body-item-right']} style={{maxWidth: '80%'}}>
		 				复制链接给社区好友，好友可通过链接注册
		 				</div>
	 				</div>
	 				<div className={styles['members-body-item-bottom']}>
	 					<span className={styles['members-body-item-invite']} >
	 						{meyley.members && meyley.members.inviteUrl}
	 					</span>

	 					{
	 						meyley.members && meyley.members.inviteUrl ? (
	 							<CopyToClipboard text={meyley.members && meyley.members.inviteUrl}
						          onCopy={() => Toast.info('已复制邀请码', 1) }>
						          	<Button 
				 						className={styles['members-body-button']} 
				 						style={{lineHeight: '0.6rem', background: '#FF0052', color: '#fff', fontSize: '0.28rem'}}>复制</Button>
						        </CopyToClipboard>
	 							) : null
	 					}
	 					
	 				</div>
	 			</div>

	 			<div className={styles['members-body-item']} onClick={() => browserHistory.push('/')}>
 					<div className={styles['members-body-item-left']}>
	 				服务佣金记录
	 				</div>
	 				<div className={styles['members-body-item-right']}>
	 					<img style={{marginLeft: '0.12rem', width: '0.16rem'}} src={require('../../../assets/icon/arrow-right.png')} />
	 				</div>
	 			</div>
	 		</div>
	  	);
	}
};

MembersBody.propTypes = {
};

export default MembersBody
